import React, { Fragment, Suspense, useDebugValue } from 'react';
// import styles from './App.less'
import { Card, Button, Space } from 'antd'
import { connect } from 'react-redux';
import * as METHOD from '../../component/smartlab-login-component/index.jsx';
import { withRouter } from 'react-router-dom';
import logoImg from '../../assets/logo.png';
import yuanImg from '../../assets/yuan.png';
import styles from './style.less';
import ColumnGroup from 'antd/lib/table/ColumnGroup';
import * as actions from './store/action'
import { IP } from '../../utils/request'

import logo from '../../assets/ADC7966C-DF36-4BEB-8ADF-E01F4058E396.png'
class App extends React.Component {

  componentDidMount() {
    this.props.getQRcode()
  }
  changeCanvasToPic = () => {
    const canvasImg = document.getElementById('qrCode'); // 获取canvas类型的二维码
    const img = new Image();
    img.src = canvasImg.toDataURL('image/png'); // 将canvas对象转换为图片的data url
    const downLink = document.getElementById('down_link');
    downLink.href = img.src;
    downLink.download = '二维码'; // 图片name
  };
  render() {
    let url = ''
    let str = IP
    str = str.slice(0, str.length - 1)
    if (this.props.QRcodeinformation.id != undefined) {
      url = str + this.props.QRcodeinformation.apkFileUrl
    }
    return (

      <div className={styles.body}>
        <div className={styles._div}>穿跨越智能视频分析系统</div>
        <img src={yuanImg} className={styles.yuan_img} />
        <div className={styles.div_one}>
          <p>账号登录</p>
          <METHOD.LoginOther />
        </div>
        <div className={styles.weima}>
          {/* <QRCode
            value={url}
            size={100} // 二维码的大小
            fgColor="#000000" // 二维码的颜色
            style={{ margin: 'auto' }}
            imageSettings={{ // 二维码中间的logo图片
              src: logo,
              height: 17,
              width: 17,
              level: 'H',
              excavate: true, // 中间图片所在的位置是否镂空
            }}
          /> */}
          <div>扫描二维码下载最新app</div>
        </div>
      </div>
    )
  };
}

const mapStateToProps = state => {
  return {
    isLogin: state.login.isLogin,
    systemRole: state.login.systemRole,
    QRcodeinformation: state.login.QRcodeinformation
  }
}
const mapDispatchToProps = (dispatch) => ({
  getQRcode() {
    dispatch(actions.getQRcode())
  }
})
export default connect(mapStateToProps, mapDispatchToProps)(withRouter(App));
